<template>
  <div id="app">
    <Header :seller="seller"></Header>
    <div class="tab-wrapper">
      <Tab :tabs="tabs"></Tab>
    </div>
  </div>
</template>

<script>
import Tab from 'components/tab/Tab.vue'
import Goods from 'components/goods/Goods.vue'
import Header from 'components/header/Header.vue'
import Seller from 'components/seller/Seller.vue'
import Ratings from 'components/ratings/Ratings.vue'

import queryString from 'query-string'

import { getSeller } from 'api'

export default {
  name: 'App',
  components: {
    Tab,
    Header
  },
  data () {
    return {
      seller: {
        id: queryString.parse(location.search).id
      }
    }
  },
  methods: {
    _getSeller () {
      getSeller({
        id: this.seller.id
      }).then(seller => {
        this.seller = seller
      })
    }
  },
  created () {
    this._getSeller()
  },
  computed: {
    tabs () {
      return [
        {
          label: '商品',
          component: Goods,
          data: {
            seller: this.seller
          }
        },
        {
          label: '评论',
          component: Ratings,
          data: {
            seller: this.seller
          }
        },
        {
          label: '商家',
          component: Seller,
          data: {
            seller: this.seller
          }
        }
      ]
    }
  }
}
</script>

<style lang="stylus">
#app
  .tab-wrapper
    position fixed
    top 136px
    left 0
    right 0
    bottom 0
</style>
